<template>
  <div class="Shop">
    <div class="list" v-for="(item, index) in list" :key="index">
      <div class="img-box">
        <img :src="item.pic" alt="" />
      </div>
      <div class="text">
        <div class="name">{{ item.name }}</div>
        <div class="one">
          <span class="fen">
            {{ item.fen }}
          </span>
          <span class="yuexiao">
            {{ item.yuexiao }}
          </span>
        </div>
        <div class="two">
          <span class="jiage">
            {{ item.jiage }}
          </span>
          <span class="qisong">
            {{ item.qisong }}
          </span>
          <span class="time">
            {{ item.time }}
          </span>
          <span class="juli">
            {{ item.juli }}
          </span>
        </div>
        <div class="three">
          <span class="jieshao">
            {{ item.jieshao }}
          </span>
          <span class="xiaoliang">
            {{ item.xiaoliang }}
          </span>
        </div>
        <div class="four">
          <span class="jian1">
            {{ item.jian1 }}
          </span>
          <span class="jian2">
            {{ item.jian2 }}
          </span>
          <span class="jian3">
            {{ item.jian3 }}
          </span>
          <span class="jian4">
            {{ item.jian4 }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import tu1 from "../assets/pic2.jpg";
// import tu1 from '../assets/pic2.jpg'

export default {
  data() {
    return {
      list: [
        {
          pic: tu1,
          name: "金百万烤鸭（苏家坨店）",
          fen: "★4.3",
          yuexiao: "月售1632",
          jiage: "起送￥20元",
          qisong: "远距离配送￥3",
          time: "47分钟",
          juli: "3.9km",
          jieshao: " “扬州炒饭棒棒哒” ",
          xiaoliang: "海淀区北京菜畅销第2名",
          jian1: "35减12",
          jian2: "70减35",
          jian3: "100减45",
          jian4: "150减50",
        },
        {
          pic: tu1,
          name: "金百万烤鸭（苏家坨店）",
          fen: "★4.3",
          yuexiao: "月售1632",
          jiage: "起送￥20元",
          qisong: "远距离配送￥3",
          time: "47分钟",
          juli: "3.9km",
          jieshao: " “扬州炒饭棒棒哒” ",
          xiaoliang: "海淀区北京菜畅销第2名",
          jian1: "35减12",
          jian2: "70减35",
          jian3: "100减45",
          jian4: "150减50",
        },
        {
          pic: tu1,
          name: "金百万烤鸭（苏家坨店）",
          fen: "★4.3",
          yuexiao: "月售1632",
          jiage: "起送￥20元",
          qisong: "远距离配送￥3",
          time: "47分钟",
          juli: "3.9km",
          jieshao: " “扬州炒饭棒棒哒” ",
          xiaoliang: "海淀区北京菜畅销第2名",
          jian1: "35减12",
          jian2: "70减35",
          jian3: "100减45",
          jian4: "150减50",
        },
        {
          pic: tu1,
          name: "金百万烤鸭（苏家坨店）",
          fen: "★4.3",
          yuexiao: "月售1632",
          jiage: "起送￥20元",
          qisong: "远距离配送￥3",
          time: "47分钟",
          juli: "3.9km",
          jieshao: " “扬州炒饭棒棒哒” ",
          xiaoliang: "海淀区北京菜畅销第2名",
          jian1: "35减12",
          jian2: "70减35",
          jian3: "100减45",
          jian4: "150减50",
        },
        {
          pic: tu1,
          name: "金百万烤鸭（苏家坨店）",
          fen: "★4.3",
          yuexiao: "月售1632",
          jiage: "起送￥20元",
          qisong: "远距离配送￥3",
          time: "47分钟",
          juli: "3.9km",
          jieshao: " “扬州炒饭棒棒哒” ",
          xiaoliang: "海淀区北京菜畅销第2名",
          jian1: "35减12",
          jian2: "70减35",
          jian3: "100减45",
          jian4: "150减50",
        },
      ],
    };
  },
};
</script>

<style scoped>
.Shop {
  width: 100%;
  height: 600px;
  overflow: scroll;
}
.list {
  margin: 20px;
  display: flex;
}
.list .img-box {
  width: 150px;
  height: 150px;
}
.list .img-box img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.text {
  margin-left: 10px;
}
.name {
  font-weight: 700;
  font-size: 18px;
}
.one {
  margin-top: 20px;
}
.one .fen {
  color: coral;
}
.one .yuexiao {
  margin-left: 10px;
}
.two {
  font-size: 12px;
  margin-top: 10px;
}
.two .time {
  margin-left: 20px;
}
.three {
  margin-top: 10px;
  font-size: 12px;
}
.three .jieshao {
  background-color: rgba(233, 103, 10, 0.288);
  border-radius: 5px;
  color: coral;
}
.three .xiaoliang {
  background-color: rgba(233, 103, 10, 0.288);
  border-radius: 5px;
  color: coral;
  margin-left: 5px;
}
.four {
  font-size: 12px;
  margin-top: 20px;
}
.four span {
  border: 1px solid rgba(255, 0, 0, 0.614);
  margin: 0 3px;
  padding: 0 2px;
  border-radius: 5px;
  color: rgb(255, 111, 0);
  text-align: center;
}
</style>